<template>
    <view class="content">
        <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>
        <!-- <loading :loadingIsShow="loadingIsShow"></loading> -->
        <view class="main-container">
            <view class="topBox">
                <view class="sort-menu">
                    <view class="sort_option item_option"
                        :class="{'sort_option_selected item_option_selected': currentPIndex===index}"
                        v-for="(item, index) in productLists" :key="index"
                        @click="changeSort(index, $event, item.goodsName)">
                        {{ item.goodsName }}
                    </view>
                </view>
            </view>

            <scroll-view :refresher-enabled="false" class="scroll-content" @scroll="scrollPage" scroll-y
                :lower-threshold="120" show-scrollbar="false" @scrolltolower="loadMore">

                <view class="scroll-box">
                    <view class="goods_filter">
                        <view class="filter_option item_option"
                            :class="{ 'filter_option_selected item_option_selected': curFilter === val }"
                            v-for="(item, val) in reviewFilterList" :key="val" @click="selectFilter(val, $event, item.filterName)">  {{ item.filterName }}</view>
                    </view>
                    <view class="userJudge_content" v-show="!loadingIsShow">
                        <template v-if="userJudgeList && userJudgeList.length > 0">
                            <view class="judgeContainer" v-for="(item, index) in userJudgeList" :key="index" @click="toJudgeDetail(item.mpComments.id)">
                                <view class="judgeContainerBg">
                                    <template>
                                        <view class="userJudgeBox">
                                            <view class="user_judge_top">
                                                <view class="user_info">
                                                    <view class="user_img"> <img :src="item.mpComments.isAnonymous === 1 ? defaultAvatarUrl : (item.avatarUrl || defaultAvatarUrl)" alt=""  mode="widthFix"> </view>
                                                    <view class="info_left"></view>
                                                    <view class="user_nicheng">  {{ item.mpComments.isAnonymous === 1 ? '匿名用户' : item.userNickName || '匿名用户' }} </view>
                                                </view>
                                                <view class="user_judge_date">{{ item.mpComments.publishTime}} </view>
                                            </view>
                                            <view class="startIcon" >
                                                <van-rate :value="item.mpComments.rating" readonly color="#FF9C00" void-icon="star" void-color="#eee" />
                                            </view>
                                            <view class="judge_item t24">{{ item.mpComments.content }}</view>
                                            <view class="judge_img t24"
                                                v-if="item.mpComments && item.mpComments.imageUrls && item.mpComments.commentImgUrls.length > 0 && item.mpComments.hasImgs ">
                                                <view class="judge_img_item" v-for="(i, j) in item.mpComments.commentImgUrls" :key="j">
                                                    <img :src="i" alt="" mode="widthFix" />
                                                </view>
                                            </view>
                                        </view>
                                        <template v-if="item.mpComments && item.mpComments.hasFollowup == 1 && item.mpCommentsFollowups ">
                                            <view class="follow-up-review">
                                                <view class="line"></view>
                                                <view class="userJudgeBox">
                                                    <view class="reviewDate" >
                                                        <view class="today"> {{ item.mpCommentsFollowups.formattedPublishTime }}追评</view>
                                                        <view class="user_judge_date" style="margin-top: 0rpx;">{{ item.mpCommentsFollowups.publishTime }} </view>
                                                    </view>
                                                    <view class="startIcon" >
                                                        <van-rate :value="item.mpCommentsFollowups.rating" readonly color="#FF9C00" void-icon="star" void-color="#eee" />
                                                    </view>
                                                    <view class="judge_item t12"  v-if="item.mpCommentsFollowups.followupText">{{ item.mpCommentsFollowups.followupText }}</view>
                                                    <view class="judge_img t12" v-if="item.mpCommentsFollowups.imageUrls && item.mpCommentsFollowups.followupsImageUrls && item.mpCommentsFollowups.followupsImageUrls.length > 0">
                                                        <view class="judge_img_item" v-for="(a, b) in item.mpCommentsFollowups.followupsImageUrls" :key="b">
                                                            <img :src="a" alt="" mode="widthFix" />
                                                        </view>
                                                    </view>

                                                </view>
                                            </view>
                                        </template>
                                        <view class="liulan">
                                            <view class="user_act" >
                                                <view class="liulan_right">
                                                    <view class="num">{{ item.mpComments.likesCount }}</view>
                                                    <view @click.stop="handlerLike(item)">
                                                        <!-- <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/judge/zan.png"
                                                            alt="" style="width: 15px; height:13px;"> -->
                                                        <van-icon name="good-job-o"  style="color:#888888 !important;"  v-if="!item.isLiked" />
                                                        <van-icon name="good-job"  style="color:#FF6203 !important;" v-if="item.isLiked" />
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                    </template>
                                </view>
                            </view>
                            <view v-if="loading" class="loading-text">正在加载...</view>
                            <view v-if="finished" class="no-more-text">没有更多了</view>
                        </template>
                        <template v-else>
                            <view class="userJudge_empty">
                                <van-empty class="custom-image"
                                    image="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noReview.png"
                                    description="当前暂无相关评论" />
                            </view>
                        </template>
                    </view>
                </view>
            </scroll-view>
        </view>

    </view>
</template>
  
<script>
import { topStyleWhite, topStyleBlack } from '@/utils/topColor'
import {timeFormatDay,timeFormat } from '@/utils/public'

import {productLikeCommentApi,getNewCommentListApi } from '@/api/judge'
import {commentPageByEmpApi} from '@/api/service'
import { formatRelativeTime } from '@/utils/time-format-utility';
import {calculateTimeDiff} from '@/utils/timeUtils'

export default {
    components: {

    },
    data () {
        return {
            loadingIsShow:true,
            defaultAvatarUrl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/defaultAvatar.png",
            title: '评价',
            currentPIndex:0,  //商品分类
            curFilter:0,  //筛选  综合  价格

            productLists:[ { goodsName:'全部' }, { goodsName:'追评' },  { goodsName:'有图/视频' }, ],
            reviewFilterList:[
                { filterNum:'0', filterName:'综合' },
                { filterNum:'1', filterName:'最新' },
                // { filterNum:'2', filterName:'回头客' }
            ],
            scrolling:false,  //吸顶效果

            userJudgeList: [ //用户评价列表
                // {
                //     ebStoreProductReply: {
                //         // userImg: require('../../static/judge/user.png'),
                //         avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                //         nickname: 'a***aw',
                //         createTime: '2024-04-11 20:30',
                //         comment: '阿姨厨艺精湛，择菜、洗菜都很利索，做的饭菜色香味俱全，做晚饭还把厨房收拾的很干净aaaaaaaaa做的饭菜色香味俱全，做晚饭还把厨房收拾的很干净',
                //         pics: [
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png',
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png'
                //         ],
                //         zhuipingList: [{
                //             followUpTime: '2024-04-12 10:30',
                //             followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                //             followUpPics: [
                //                 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //             ],
                //         }],
                //         followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                //         followUpPics: [
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png'
                //         ],
                //         followUpIsReply: null,
                //         followUpReplyContent: null,
                //         followUpReplyTime: null,
                //         followUpTime: '2024-04-12 10:30',
                //     },
                //     productReplyLikesNum: 0,
                //     replyLikes: false,
                // }, 
                // {
                //     ebStoreProductReply: {
                //         // userImg: require('../../static/judge/user.png'),
                //         avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                //         nickname: "A***rew",
                //         createTime: "2023-10-02",
                //         comment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                //         pics: [
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png',
                //             'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png'
                //         ],
                //         zhuipingList: [{
                //             followUpTime: '2023-04-12 20:30',
                //             followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                //             followUpPics: [
                //                 // { imgurl: require('../../static/shangcheng/judge02.png') },
                //             ]
                //         }],
                //         followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～',
                //         followUpIsReply: null,
                //         followUpPics: null,
                //         followUpReplyContent: null,
                //         followUpReplyTime: null,
                //         followUpTime: '2024-02-01 20:30',
                //     },
                //     productReplyLikesNum: 0,
                //     replyLikes: false,
                // }

            ],
            popupShow:false,
            popupData:[
            {
                id:0,
                name:'全部'
            },
            {
                id:1,
                name:'糕点饼干'
            },
            {
                id:2,
                name:'肉食海味'
            },
            {
                id:3,
                name:'滋补佳品'
            },
            {
                id:4,
                name:'坚果果干'
            },
            {
                id:5,
                name:'坚果果干'
            },
            {
                id:6,
                name:'坚果果干'
            },
            {
                id:7,
                name:'坚果果干'
            },
            ],
            inDianZan:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/judge/zan.png',
            inActDianZan:'',
            isMyLike:false,
            params:{},
            productId:undefined,
            isFollowUp: undefined,
            isPic: undefined,
            sortField:'comprehensive',  //排序类型，综合（comprehensive）、最新（last）、回头客（repeatBuy）
            timeDiffResult:'',
            bizType:1,// 1=商品 2=服务 
            subBizType:2, // 如果bizType=2 这个值才有用 1=服务人员 2= 商品
            sortType:1, // 排序类型 1=综合 2=最新
            // 服务人员评价列表 所需参数
            replyId:undefined,
            serviceUserId:undefined, //服务人员id
            queryType:1,// 查询类型1=全部 2=有图 3=追评
            orderType:'ALL', // ALL 全部 NEWEST 最新
            filterType:'ALL', // ALL 全部 PHOTO有图 VIDEO视频
            serviceReservationId:undefined,
            pageNum:1,
            pageSize:10,
            total:0,
            isAnimated: false,
            source:'', //页面来源
            loading: false,
            finished: false,
            hasData:false, //是否有数据
        }
    },
    computed: {
        preCalculatedTimeDiff() {
            return this.timeDiffResult; // 在模板中直接使用提前计算好的结果
        }
    },
    filters: {
        // timeFormatDay(time1) {
        //     console.log('time1', time1)
        //     return timeFormatDay(time1)
        // },
        // timeFormat(time1){
        //     console.log('time1', time1)
        //     return timeFormat(time1)
        // },
        // formatDateSE(timeStr) {
        //     console.log(timeStr,'timeStr')
        //     if (timeStr !== null && timeStr !== undefined) {
        //         // const timeA=timeStr.replace(/-/g, '/')
        //         // const timeStrss = timeStr.replace('+0000', '');
        //         const date = new Date(timeStr);
        //         const year = date.getFullYear();
        //         const month = ("0" + (date.getMonth() + 1)).slice(-2);
        //         const day = ("0" + date.getDate()).slice(-2);
        //         const weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][date.getDay()];
        //         const hours = ("0" + date.getHours()).slice(-2);
        //         const minutes = ("0" + date.getMinutes()).slice(-2);
        //         const formatDate = `${year}.${month}.${day}  ${hours}:${minutes}`
        //         return formatDate;
        //     } else {
        //         console.error('传入的startTime格式不正确，期望为合法数字类型的时间戳');
        //         return ''
        //     }

        // },

        // toimg(text) {
        //     return weixinMojiTranslate(text)
        // }
    },
    onLoad (data) {
    // 取到路由携带的参数
        if (data&& data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log(JSON.parse(decodeURIComponent(data.params)))
            console.log('params', this.params)
            this.productId=this.params?.id ||undefined
            this.source = this.params?.source || '';
            this.serviceUserId=this.params?.empId ||undefined
            this.bizType=this.params?.bizType ||undefined
            // debugger
            // if (this.params.source == 'serviceStaffInfo' ){
            //     this.title='服务人员评价'
            //     this.getCommentPageByEmp()
            // }

        }
    },
    onReady () {
        // const abnormal = this.getAbnormalDetailsMethod()
        // Promise.all([abnormal]).then(() => {
        //     console.log('所有api加载完成')
        //     this.loadingIsShow = false
        // })
    
    },
    onShow(){
        this.changeMenuData(this.source)
        this.changeApi(this.source)
        //this.getProductCommentList()

    },
    methods: {
        formatTime(timeStr) {
            if (!timeStr) return '';
            const time = timeStr.replace(/-/g, '/');
            console.log(time)
            const timestamp = new Date(time).getTime()
            return formatRelativeTime(timestamp);
        },
        formatTimeFollowUp(timeStr) {
            // if (!timeStr) return '';
            // const time = timeStr.replace(/-/g, '/');
            // console.log(time)
            // const timestamp = new Date(time).getTime()
            return formatRelativeTime(timeStr);
        },
        formatDateAndTime(timeStr1,timeStr2) {
             if (!timeStr1 || !timeStr2) return '';
            const time1 = timeStr1.replace(/-/g, '/')
            const time2 = timeStr2.replace(/-/g, '/');
            console.log(time1,time2)
            return calculateTimeDiff(time1,time2);
        },
        // scrolltolower () {
        //     if (this.totalPage <= this.contentData.length) {
        //         this.isLoadAll = true
        //         this.biaozhi = 0
        //         this.loadingText = '没有更多数据啦~'
        //     } else {
        //         this.abnormalDetailsParamas.pageNum++
        //         this.isLoadAll = true
        //         this.loadingText = '加载中...'
        //         this.biaozhi = 1
        //         this.getAbnormalDetailsMethod()
        //     }
        // },

        // 互动页面
        scrollPage(e) {
            // console.log(e.detail.scrollTop, this.scrolling)
            // if (e.detail.scrollTop > 1 && !this.scrolling) {
            //     this.scrolling = true
            // } else if ((e.detail.scrollTop <= 1 && this.scrolling) || (e.detail.scrollTop <= 1 && !this.scrolling)) {
            //     this.scrolling = false
            // }
        },
        // 新增加载更多方法
        loadMore() {
            if (!this.finished) {
                // this.getProductReplyById();
                this.getProductCommentList();
            }
        },
        calculateTimeDiff(time1,time2) {
            console.log(time1,'time1',time2,'time2')
            var time = new Date(time1.replace(/-/g, '/').replace('+0000', '')).getTime()
            var timess2=new Date(time2.replace(/-/g, '/').replace('+0000', '')).getTime()
            console.log(time,timess2,'time')
            if (time > 0) {
                var result
                time = parseInt(time)
                var minute = 1000 * 60
                var hour = minute * 60
                var day = hour * 24
                var month = day * 30
                var diffValue = time - timess2
                if (diffValue < 0) {
                    return
                }
                var monthC = diffValue / month
                var weekC = diffValue / (7 * day)
                var dayC = diffValue / day
                var hourC = diffValue / hour
                var minC = diffValue / minute

                if (monthC >= 1) {
                    if (monthC <= 12) {  //未超过一年  08-09 11:09:09
                     result = '' + parseInt(dayC) + '天后'
                    } else { //超过一年  2022-08-25 11:26:09
                    result =time1
                    }
                } else if (weekC >= 1) {
                    result = '' + parseInt(dayC) + '天后'
                } else if (dayC >= 1) {
                    result = '' + parseInt(dayC) + '天后'
                } else if (hourC >= 1) {
                     result = '' + 1 + '天内'
                } else if (minC >= 1) {
                    result = '' + parseInt(minC) + '分钟内'
                } else {
                    // result = '刚刚'
                    result = '' + 1 + '分钟内'
                }
                return result
            } else {
                return ''
            }
        },
        // 返回按钮
        onClickLeft () {
            uni.navigateBack()
        },

        changeMenuData(source){
            if(source =="serviceStaffInfo" ){
                this.title='服务人员评价'
                this.productLists = [ { goodsName:'全部' },  { goodsName:'有图' } ]
            }else if(source =="productReply" ){
                this.title='用户评价'
                this.productLists = [ { goodsName:'全部' },  {goodsName:'追评' }, { goodsName:'有图' }]
            }else{
                this.title='全部评价'
                this.productLists = [ { goodsName:'全部' }, { goodsName:'有图' }]
            }
        },

        changeApi(source){
            this.getProductCommentList()
            // if(source==='serviceStaffInfo' ){
            //     this.getCommentPageByEmp()
            // }else{
            //     this.getProductReplyById()
            // }
        },

        clearData(){
            this.loadingIsShow = true
            this.loading = false
            this.finished = false
            this.pageNum=1
            this.total=0
            this.userJudgeList = []
        },
        // 第一行
        changeSort(index,e,name){
            this.clearData()
            this.currentPIndex = index
            console.log(index,e)
            if(this.source ==='productReply' ){
                if (name.includes('图') || index === 2) {
                    this.filterType = 'PHOTO'
                    this.queryType = 2
                } else if (name.includes('追评') || index === 1) {
                    this.filterType = 'REPLY'
                    this.queryType = 3
                } else {
                    this.filterType = 'ALL'
                    this.queryType = 1
                }
            }else{
                this.filterType = name === '全部' ? 'ALL' : name === '有图' ? 'PHOTO' : ''
            }
            this.changeApi(this.source)
        },

        // 第二行
        selectFilter(val,e,name){
            this.clearData()
            this.curFilter=val
            console.log(val,e,name,'评论列表第二行tab',this.source)
            this.orderType = val === 0 ? 'ALL' : val === 1 ? 'NEWEST' : 'ALL'
            this.sortType = val === 0? 1 : val === 1? 2 : 1
            this.changeApi(this.source)
            // if(this.source ==='serviceStaffInfo' ){
            //     this.orderType = val === 0 ? 'ALL' : val === 1 ? 'NEWEST' : 'ALL'
            //     this.getCommentPageByEmp()
            // }else{
            //     this.orderType = val === 0 ? 'ALL' : val === 1 ? 'NEWEST' : 'ALL'
            //     this.getProductReplyById()
            // }
        },

        // 显示弹窗
        onClickSort () {
            this.popupShow = true
            topStyleWhite()
        },
        // 隐藏弹窗
        closePopup () {
            this.popupShow = false
            topStyleBlack()
        },

        // 跳转用户详情
        toJudgeDetail(id){
            const params = {}
            params.judgeId = id
            uni.navigateTo({
                url:
                    '/pages/userJudges/judgeDetail?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },

        // 点赞
        handlerLike(item){
            item.isLiked=!item.isLiked
            if(item.isLiked){
                item.mpComments.likesCount++
            }else{
                item.mpComments.likesCount--
            }
            this.replyId=item.mpComments.id
            this.likeType=1
            this.likeComment()
        },


        // 是否为null
        areAllNull(...args) {
            return args.every(arg => arg === null);
        },

        // 都不为null
        notAreAllNull(...args) {
            return args.every(arg => arg !== null);
        },


        // 判断是否有图片
        handleImages(pics) {
            // 判断追评中是否有图片的逻辑
            let isPics;
            if (pics !== null && pics !== '' && pics !== undefined) {
                isPics = true;
            } else {
                isPics = false;
            }
            return isPics;
        },

        // 点赞
        likeComment(){
            return new Promise((resolve, reject) => {
                const params={
                    commentId:this.replyId,
                    likeType:this.likeType    // 点赞类型(1=评论2=追评)
                }
                productLikeCommentApi(params).then((res) => {
                    console.log(res)
                    if (res.code === 200) {
                        console.log('res-----', res.data)
                        resolve(res)
                    } else {
                        reject(res)
                    }
                })
            })
        },
     
       
        // // 通过商品Id获取商品评论列表
        // getProductReplyById() {
        //     if (this.loading || this.finished) return;
        //     this.loading = true;
        //     const apiParams = {
        //         productId:this.productId,
        //         pageNum:this.pageNum,
        //         pageSize:this.pageSize,
        //         orderType:this.orderType,
        //         filterType:this.filterType,
        //     }
        //     getProductCommentListApi(apiParams).then(res => {
        //         console.log(res, '商品评论列表')
        //         this.total = res.data.total;
        //         if (res.code == 200) {
        //             this.userJudgeList = this.pageNum === 1
        //                 ? res.data.list
        //                 : [...this.userJudgeList, ...res.data.list];
        //             this.finished = this.userJudgeList.length >= this.total;
        //             this.userJudgeList.forEach((ele, index) => {
        //                 // 判断评论中是否有图片
        //                 const isImgs = this.handleImages(ele.attachment)
        //                 this.$set(ele, 'isImgs', isImgs)
        //                 if (isImgs) {
        //                     ele.judgeImgs = ele.attachment.split(',')
        //                 }
        //             })
        //             this.pageNum++;
        //             console.log(this.userJudgeList, 'this.userJudgeData')
        //             this.hasData = this.userJudgeList.length > 0
        //             // resolve(res)
        //         } else {
        //             // reject(res)
        //         }
        //     }).finally(() => {
        //         this.loading = false;
        //     })
        // },

        // // 服务人员评价
        //  // 服务人员的评价信息
        //  getCommentPageByEmp(){
        //     if (this.loading || this.finished) return;
        //     this.loading = true;
        //     const params = {
        //         empId:this.serviceUserId,
        //         pageNum:this.pageNum,
        //         pageSize:this.pageSize,
        //         orderType:this.orderType,
        //         filterType:this.filterType,
        //     }
        //     // return new Promise((resolve, reject) => {
        //         commentPageByEmpApi(params).then(res=>{
        //             console.log(res.data,'服务人员的评价信息')
        //             this.total = res.data.total;
        //             if(res.code==200){
        //                 this.userJudgeList = this.pageNum === 1
        //                     ? res.data.list
        //                     : [...this.userJudgeList, ...res.data.list];
        //                     this.finished = this.userJudgeList.length >= this.total;
        //                 this.userJudgeList.forEach((ele,index) => {
        //                     // 判断评论中是否有图片
        //                     const isImgs=this.handleImages(ele.attachment)
        //                     this.$set(ele,'isImgs',isImgs)
        //                     if(isImgs){
        //                         ele.judgeImgs=ele.attachment.split(',')
        //                     }
        //                 })
        //                 this.pageNum++;
        //                 console.log(this.userJudgeList, 'this.userJudgeData')
        //                 this.hasData = this.userJudgeList.length > 0
        //                 // resolve(res)
        //             } else {
        //                 // reject(res)
        //             }
        //         }).finally(() => {
        //             this.loading = false;
        //         })
        //     // })
        // },
        // 获取商品详情评论列表
        getProductCommentList() {
            if (this.loading || this.finished) return;
            this.loading = true;
            this.loadingIsShow = true
            getNewCommentListApi({
                bizType: this.bizType,// 1=商品 2=服务
                subBizType: this.bizType == 1 ? undefined : this.subBizType,// // 如果bizType=2 这个值才有用 1=服务人员 2= 商品
                serviceUserId: this.bizType == 1 ? undefined :this.serviceUserId,  // 服务人员id
                serviceReservationId: this.bizType == 1 ? undefined :this.serviceReservationId, // 服务预约id
                productId: this.subBizType==1 ? undefined : this.productId, // 商品id
                queryType: this.queryType, // 1=全部 2=有图 3=追评 
                sortType: this.sortType, // 1=综合 2=最新
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            }).then(res => {
                console.log(res, '商品评论列表')
                this.total = res.data.total;
                if (res.code == 200) {
                    this.userJudgeList = this.pageNum === 1
                        ? res.data.list
                        : [...this.userJudgeList, ...res.data.list];
                    this.finished =this.userJudgeList&& this.userJudgeList.length >= this.total;
                    if(this.userJudgeList && this.userJudgeList.length>0){
                        this.userJudgeList.forEach((ele, index) => {
                            ele.mpComments.publishTime = this.formatTime(ele.mpComments.createTime)
                            const hasImgs = this.handleImages(ele.mpComments.imageUrls)
                            ele.mpComments.commentImgUrls = ele.mpComments.imageUrls ? ele.mpComments.imageUrls.split(',') : []
                            this.$set(ele.mpComments, 'hasImgs', hasImgs)
                            if (ele.mpComments.hasFollowup == 1) {
                                ele.mpCommentsFollowups.publishTime = this.formatTimeFollowUp(ele.mpCommentsFollowups.followupTime)
                                //ele.mpCommentsFollowups.publishTime = this.formatTime(ele.mpCommentsFollowups.followupTime)
                                ele.mpCommentsFollowups.formattedPublishTime = this.formatDateAndTime(ele.mpCommentsFollowups.followupTime, ele.mpComments.createTime)
                                ele.mpCommentsFollowups.hasFollowUpsImgs = this.handleImages(ele.mpCommentsFollowups.imageUrls)
                                ele.mpCommentsFollowups.followupsImageUrls = ele.mpCommentsFollowups.imageUrls ? ele.mpCommentsFollowups.imageUrls.split(',') : []
                            }
                        })
                    }

                    // this.userJudgeList.forEach((ele, index) => {
                    //     // 判断评论中是否有图片
                    //     const isImgs = this.handleImages(ele.attachment)
                    //     this.$set(ele, 'isImgs', isImgs)
                    //     if (isImgs) {
                    //         ele.judgeImgs = ele.attachment.split(',')
                    //     }
                    // })
                    this.pageNum++;
                    console.log(this.userJudgeList, 'this.userJudgeData')
                    this.hasData =  this.userJudgeList && this.userJudgeList.length > 0
                    // resolve(res)
                } else {
                    // reject(res)
                }
            }).finally(() => {
                this.loading = false;
                this.loadingIsShow = false
            })
        }
    }
}
</script>
    
<style lang="scss" scoped>
.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    z-index: -2;
    background-color: #f9f9f9;
    background-size: 100%;

}

.main-container {
    // background: white;
    background-color: #f9f9f9;
    // box-shadow: 0px 4px 10px rgba(61, 92, 153, 0.1);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    // padding-bottom: 64px;
}


.topBox {
    background: #ffffff;
    padding: 10px 24px 10px 24px;

    // 全部分类  menu
    .sort-menu {
        display: flex;

        .sort_option {
            line-height: 14px;
            font-size: 14px;
            text-align: left;
            color: #666666;
            margin-right: 39px;
        }

        .sort_option_selected {
            font-weight: bolder;
            text-align: left;
            color: #111111;
            font-size: 18px;
            line-height: 18px;
        }
    }
}

// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}

.scroll-box {
    height: 100vh;
    background: #ffffff;
}
// 综合  销量  价格按钮
.goods_filter {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 8px;
    margin-bottom: 12px;
    display: flex;
    color: #333333;

    .filter_option {
        font-size: 14px;
        text-align: left;
        color: #666666;
        border: 1px solid #e1e1e1;
        border-radius: 25px;
        margin-right: 10px;
        height: 24px;
        line-height: 24px;
        padding-left: 9px;
        padding-right: 9px;
    }

    .filter_option_selected:last-child {
        margin-right: 0px;
    }

    .filter_option_selected {
        border: 1px solid #111111;
        font-size: 14px;
        color: #111111;
        // font-weight: 500;
    }
}

.userJudge_content {
    position: relative;
    // background: #F9F9F9;
    padding-bottom: 12px;

    .judgeContainer {
        background-color: #f9f9f9;
        padding-bottom: 10px;   //每一个评论中间的灰色

        .judgeContainerBg{
            // margin-bottom: 10px;
            background: #ffffff;
            padding-left: 24px;
            padding-right: 24px;
        }
        // 第一次评价
        .userJudgeBox {
            padding: 26rpx 0rpx;
        }

        // 评价人的信息 时间
        .user_judge_top {
            display: flex;
            flex-direction: column;

            .user_info {
                display: flex;
                

                .user_img {
                    height: 96rpx;
                    line-height: 96rpx;

                    img {
                        width: 96rpx;
                        height:96rpx;
                        border-radius: 50%;
                    }
                }

                .user_nicheng {
                    // font-weight: bolder;
                    font-size: 28rpx;
                    line-height: 96rpx;
                    text-align: left;
                    color: #111111;
                    margin-left: 13px;
                }

            }

        }

        .user_judge_date {
            margin-top: 24rpx;
            font-size: 24rpx;
            text-align: left;
            color: #666666;
            line-height: 24rpx;
        }

        // 评价内容的文字
        .judge_item {
            color: #111111;
            font-size: 12px;
            text-align: left;
            max-width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }

        // 评价内容的三张图
        .judge_img {
            display: flex;
            width: 100%;
            align-items: center;

            .judge_img_item {
                width: calc((100% - 12rpx) / 3);
                margin-right: 6rpx;
                border-radius: 20rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }

            .judge_img_item:last-child {
                margin-right: 0px;
            }

            img {
                width: 100%;
                border-radius: 10rpx;
            }
        }

        // 追评
        .follow-up-review{ }
        // 追评内容上方的横线
        .line {
            height: 2px;
            width: 100%;
            background: #f0f0f0;
        }

        // 追评时间
        .reviewDate {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 14px;
            line-height: 14px;

            .today {
                font-size: 14px;
                text-align: left;
                color: #FF6203;
                line-height: 14px;
            }
        }

        // 浏览量 + 点赞
        .liulan {
            line-height: 13px;
            height: 13px;
            padding-bottom: 13px;

            .user_act {
                float: right;
                display: flex;
                align-items: center;
                
                img{
                    width: 15px;
                    height: 13px;
                }

                .liulan_left {
                    display: flex;
                    margin-right: 17px;
                    align-items: center;
                }

                .liulan_right {
                    display: flex;
                    align-items: center;
                    line-height: 28rpx;
                }

                .num {
                    margin-right: 7px;
                    font-size: 22rpx;
                    line-height: 22rpx;
                    text-align: right;
                    color: #666666;
                }
            }

        }

    }
    // .judgeContainer :last-child {
    //     padding-bottom: 0px;
    // }
}
.startIcon{
    display: flex;
    height:32rpx;
    align-items: center;
    margin-top: 30rpx;
}
::v-deep .liulan_right .van-icon{
    font-size: 28rpx;
}
::v-deep .van-rate{
    font-size: 32rpx;
    line-height: 32rpx;
}
::v-deep .van-rate__icon{
    font-size: 32rpx;
    line-height: 32rpx;
}
.loading-text, .no-more-text {
    padding: 20rpx;
    text-align: center;
    color: #888;
    font-size: 24rpx;
}

.loading {
    text-align: center;
    margin-top: 16px;
    color: #242629;
    font-size: 14px;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}

::v-deep .van-nav-bar__title {
    font-size: 14px;
    color: #333333;
}

::v-deep .van-empty {
    background: transparent;
    border-radius: 12px;
}

::v-deep .van-empty__image {
    width: 164px;
    height: 164px;
}


.pl15 {
    padding-left: 15px;
}

.b12 {
    margin-bottom: 12px;
}

.t12 {
    margin-top: 12px;
}
.t24{
    margin-top: 24rpx;
}
</style>
    